<template>
   <view class="uv-page">
      <uv-cell-group>
         <uv-cell
            @click="openSheet(index)"
            :title="item.title"
            v-for="(item, index) in list"
            :key="index"
            isLink
         >
            <template v-slot:icon>
               <image class="uv-cell-icon" :src="item.iconUrl" mode="widthFix"></image>
            </template>
         </uv-cell>
      </uv-cell-group>
      <view>
         <uv-action-sheet
            ref="uActionSheet1"
            title=""
            @close="close"
            @select="select"
            :actions="actions0"
         >
         </uv-action-sheet>
         <uv-action-sheet ref="uActionSheet2" :actions="actions1"> </uv-action-sheet>
         <uv-action-sheet ref="uActionSheet3" :actions="actions2" cancelText="取消">
         </uv-action-sheet>
         <uv-action-sheet
            ref="uActionSheet4"
            :actions="actions3"
            description="这是一段描述文本,字号偏小,颜色偏淡"
         >
         </uv-action-sheet>
         <uv-action-sheet ref="uActionSheet5" title="标题位置" :round="10">
            <text style="margin: 10px 20px 30px 20px; color: #303133; font-size: 15px"
               >这是一段通过slot传入的内容,您可以在此自定义操作面板</text
            >
         </uv-action-sheet>
         <uv-action-sheet
            ref="uActionSheet6"
            title="微信开放能力"
            :actions="actions5"
            @getuserinfo="getuserinfo"
         ></uv-action-sheet>
      </view>
   </view>
</template>

<script lang="ts" setup>
import type { UvActionSheetMethods } from '@/uvui-ts/components/uv-action-sheet';
import { ref } from 'vue';

const actions0 = [{ name: '选项1' }, { name: '选项2' }, { name: '选项3', subname: '描述文本' }];
const actions1 = [
   { name: '选项1' },
   { name: '选项2', loading: true },
   { name: '选项被禁用', disabled: true },
];
const actions2 = [{ name: '选项1' }, { name: '选项2' }, { name: '选项3' }];
const actions3 = [{ name: '选项1' }, { name: '选项2' }, { name: '选项3' }];
const actions5 = [{ name: '获取用户信息', openType: 'getUserInfo', color: '#5ac725' }];
const list = [
   {
      title: '普通使用',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/custom.png',
   },
   {
      title: '设置状态',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/status.png',
   },
   {
      title: '显示取消按钮',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/cancel.png',
   },
   {
      title: '描述内容',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/desc.png',
   },
   {
      title: '显示标题(显示圆角)',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/title.png',
   },
   {
      title: '微信开放能力',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/open.png',
   },
];
const uActionSheet1 = ref<UvActionSheetMethods>();
const uActionSheet2 = ref<UvActionSheetMethods>();
const uActionSheet3 = ref<UvActionSheetMethods>();
const uActionSheet4 = ref<UvActionSheetMethods>();
const uActionSheet5 = ref<UvActionSheetMethods>();
const uActionSheet6 = ref<UvActionSheetMethods>();

const openSheet = (index: number) => {
   // #ifndef MP
   if (index === 5) return uni.$uv.toast('请在微信内预览');
   // #endif
   switch (index) {
      case 0:
         uActionSheet1.value?.open();
         break;
      case 1:
         uActionSheet2.value?.open();
         break;
      case 2:
         uActionSheet3.value?.open();
         break;
      case 3:
         uActionSheet4.value?.open();
         break;
      case 4:
         uActionSheet5.value?.open();
         break;
      case 5:
         uActionSheet6.value?.open();
         break;
   }
};
const getuserinfo = (e: any) => {
   uni.$uv.toast(`用户名：${e.detail.userInfo.nickName}`);
};
const close = () => {
   console.log('close');
};
const select = (e: any) => {
   uni.$uv.toast(`选择了${e.name}`);
};
</script>

<style lang="scss" scoped>
.uv-page {
   padding: 0;
}
</style>
